<!DOCTYPE html>
<html>
<head>
<title>订单管理</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
	name="viewport">
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/font-awesome@4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://unpkg.com/admin-lte@2.3.8/dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="https://unpkg.com/admin-lte@2.3.8/dist/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.11.1/dist/bootstrap-table.min.css">
<link rel="stylesheet" href="/css/main.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
	<div id="app" class="wrapper" v-cloak>

		<main-header></main-header>
		<main-sidebar></main-sidebar>
		<!-- =============================================== -->
		<!-- Content Wrapper. Contains page content -->
		<div class="content-wrapper">
			<content-header title="订单管理"></content-header>

			<!-- Main content -->
			<section class="content">
				<div v-show="showList">
					<div class="box">
						<div class="box-header with-border">
							<h3 class="box-title">列表</h3>
						</div>
						<!-- /.box-header -->
						<div class="box-body">
							<div class="form-group">
								<div class="form-group col-sm-2">
									<input type="text" class="form-control" v-model="q.orderNumber"
										@keyup.enter="query" placeholder="订单编号">
								</div>
								<div class="form-group col-md-2">
									<input type="text" class="form-control" v-model="q.realName" @keyup.enter="query" placeholder="姓名">
								</div>
								<div class="form-group col-md-2">
									<input type="text" class="form-control" v-model="q.mobile" @keyup.enter="query" placeholder="手机号码">
								</div>
								<div class="form-group col-md-2">
									<select class="form-control" v-model="q.orderStatus">
									 <option value="">--订单状态--</option>
									 <option value="1">待付款</option>
									 <option value="2">待发货</option>
									 <option value="3">待自提</option>
									 <option value="4">已完成</option>
									 <option value="5">已退款</option>
									 <option value="-1">已取消</option>
									</select>
								</div>
								<div class="form-group col-md-2">
									<select class="form-control" v-model="q.storeId">
									 <option value="">--团长--</option>
									 <option v-for="store in storeList" :value="store.id">{{store.storeName}}</option>
									</select>
								</div>
								<a class="btn btn-default" @click="query">查询</a> 
								<a class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
							</div>
							<table id="table"></table>
						</div>
					</div>
				</div>

				<div v-show="!showList">
					<div class="row">
						<div class="col-sm-12">
							<div class="box">
								<div class="box-header with-border">
									<h3 class="box-title">订单信息</h3>
								</div>
								<!-- /.box-header -->
								<div class="box-body">
									<form class="form-horizontal">
										<div class="form-group">
											<div class="col-sm-2 control-label">订单编号</div>
											<div class="col-sm-7">
												<div class="checkbox">
													<label> {{order.orderNumber}} </label>
												</div>
											</div>
										</div>
										<div class="form-group">
											<div class="col-sm-2 control-label">订单金额</div>
											<div class="col-sm-7">
												<div class="checkbox">
													<label> {{order.totalAmount}} </label>
												</div>
											</div>
										</div>
										<div class="form-group">
											<div class="col-sm-2 control-label">订单状态</div>
											<div class="col-sm-7">
												<div class="checkbox">
													<label v-if="order.orderStatus == 0"> 已取消 </label> <label
														v-if="order.orderStatus == 1"> 待付款 </label> <label
														v-if="order.orderStatus == 2"> 待发货 </label> <label
														v-if="order.orderStatus == 3"> 待收货 </label> <label
														v-if="order.orderStatus == 4"> 已完成 </label> <label
														v-if="order.orderStatus == 5"> 已评价 </label>
												</div>
											</div>
										</div>
										<div class="form-group">
											<div class="col-sm-2 control-label">下单时间</div>
											<div class="col-sm-7">
												<div class="checkbox">
													<label> {{order.createTime}} </label>
												</div>
											</div>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>

					<div class="box">
						<div class="box-header with-border">
							<h3 class="box-title">订单商品</h3>
						</div>
						<!-- /.box-header -->
						<div class="box-body">
							<table class="table table-bordered">
								<thead>
									<tr>
										<th>商品图片</th>
										<th>商品名称</th>
										<th>购买数量</th>
										<th>价格</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="orderGoods in order.orderGoodsList">
										<td><img alt="" :src="orderGoods.picUrl" width="100px"
											height="100px"></td>
										<td>{{orderGoods.goodsName}}</td>
										<td>{{orderGoods.num}}</td>
										<td>{{orderGoods.price}}</td>
									</tr>
								</tbody>
							</table>

							<br> 
							<input type="button" class="btn btn-warning"
								@click="reload" value="返回" />
						</div>
					</div>
				</div>
			</section>
		</div>
		
		<div id="send" class="modal fade">
		  <div class="modal-dialog modal-lg">
		  <div class="modal-content">
		  <div class="modal-header">
	      <h4 class="modal-title">发货</h4>
		  </div>
		  	<div class="modal-body">
		  		<form class="form-horizontal">
		         <div class="form-group">
					<div class="col-sm-3 control-label">
						快递单号<span class="text-danger">*</span>
					</div>
					<div class="col-sm-7">
						<input type="text" class="form-control" name="courierNum"
							v-model="courierNum" placeholder="快递单号" />
					</div>
				</div>
				</form>
		    </div>
		    <div class="modal-footer">
	          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	          <button type="button" class="btn btn-primary" @click="sendGoods" data-dismiss="modal">确定</button>
	        </div>
		  </div>
		  </div>
		</div>
	</div>
	<script src="https://unpkg.com/jquery@2.2.4/dist/jquery.min.js"></script>
	<script src="https://unpkg.com/vue@2.2.6/dist/vue.min.js"></script>
	<script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
	<script src="https://unpkg.com/bootstrap-table@1.11.1/dist/bootstrap-table.min.js"></script>
	<script src="https://unpkg.com/admin-lte@2.3.8/dist/js/app.js"></script>
	<script src="/js/admin/components.js"></script>
	<script src="/js/admin/common.js"></script>
	<script src="/js/admin/order/order.js"></script>
</body>
</html>